<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">
      <!-- 表单 -->
      <el-form :inline="true" :model="userInfo" class="demo-form-inline">
        <el-form-item label="部门">
          <el-select v-model="userInfo.depId" placeholder="请输入所属部门">
            <el-option
                v-for="item in department"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px"><el-tag type="success">{{
                  item.count
                }}</el-tag></span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="userInfo.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
            <el-radio :label="3">全部</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userInfo.nickName" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-refresh">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" class="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" class="el-icon-plus" @click="addUser">添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-download" @click="exportUser">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table
          :data="tableData"
          border
          max-height="400"
          style="width: 100%;">
        <el-table-column
            prop="id"
            label="#"
            width="50">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名"
            width="110">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="60">
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? '男' : (scope.row.sex == 1 ? '女' : '保密') }}
          </template>
        </el-table-column>
        <el-table-column
            prop="departName"
            sortable
            label="所属部门"
            width="180">
        </el-table-column>
        <el-table-column
            sortable
            prop="birth"
            label="生日"
            width="180">
        </el-table-column>
        <el-table-column
            sortable
            prop="email"
            label="邮箱"
            width="180">
        </el-table-column>
        <el-table-column
            prop="phoneNumber"
            label="电话"
            width="150">
        </el-table-column>
        <el-table-column
            prop="status"
            label="是否禁用"
            width="100">
          <!--          scope表示当前表中的一行数据-->
          <template slot-scope="scope">
            <!--         scope.row表示这一行的对象   -->
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
          <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="userInfo.indexValue"
          :page-sizes="[5, 10, 20, 30, 40]"
          :page-size="userInfo.sizeValue"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <UserAdd :department="department" :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate"
             ref="addOrUpdateRef"></UserAdd>
  </div>
</template>

<script>
import {findUserDep6, findUserDepInfo6, findDepartmentInfo, exportUser} from "../../api/index.js";
import UserAdd from "../User/UserAdd";
import axios from "axios";

export default {
  name: "index",
  data() {
    return {
      total: 0, // 获取数据的总数
      userInfo: {
        depId: '', // 所属部门ID
        username: '', // 用户名
        email: '', // 邮箱
        sex: 3, // 单选框信息
        nickName: '', // 昵称
        indexValue: 1, // 每页显示几条数据
        sizeValue: 5, // 第几页
      },
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
      department: {
        address: '',
        id: '',
        mgrId: '',
        modifiedTime: '',
        name: '',
        phone: '',
      },
      tableData: [{
        id: '',
        username: '',
        nickname: '',
        email: '',
        avatar: '',
        birth: '',
        phoneNumber: '',
        sex: '',
        status: '',
        type: '',
      }]
    }
  },
  components: {
    UserAdd
  },
  created() {
    this.findUserDepInfo();  // 查询前6条数据信息
    this.findDepartmentInfo(); // 查询所有部门信息
    this.findUserDepartmentInfo(); // 带条件查询数据信息
  },
  methods: {
    search() {
      this.findUserDepartmentInfo();
    },
    handleSizeChange(val) {
      this.userInfo.sizeValue = val;
      this.findUserDepartmentInfo();
    },
    handleCurrentChange(val) {
      this.userInfo.indexValue = val;
      this.findUserDepartmentInfo();
    },
    // 按钮点击事件 显示新增编辑弹窗组件
    addUser() {
      this.addOrUpdateVisible = true
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      if (data === 'false') {
        this.addOrUpdateVisible = false
      } else {
        this.addOrUpdateVisible = true
      }
    },
    // 查询用户和部门信息
    findUserDepInfo() {
      findUserDep6().then((res) => {
        this.tableData = res.data.userInfo;
        this.total = res.data.total;
      });
    },
    // 带条件查询
    findUserDepartmentInfo() {
      let param = new URLSearchParams();
      param.append("current", this.userInfo.indexValue);
      param.append("size", this.userInfo.sizeValue);
      param.append("username", this.userInfo.username);
      param.append("email", this.userInfo.email);
      param.append("sex", this.userInfo.sex);
      param.append("nickname", this.userInfo.nickName);
      param.append("departmentId", this.userInfo.depId);
      findUserDepInfo6(param).then((res) => {
        this.tableData = res.data.UserPage.records;
        this.total = res.data.UserPage.total;

      })
    },
    findDepartmentInfo() {
      findDepartmentInfo().then((res) => {

        this.department = res.data.departmentList;
        console.log(this.department)
      })
    },
    exportUser() {
      axios.post("user/export", this.userInfo, {
        responseType: "blob"
      }).then(res => {
        // 将二进制文件转化为可访问的url
        let url = window.URL.createObjectURL(new Blob([res.data]));
        //创建了一个a标签的超链接
        var a = document.createElement("a");
        //将a标签添加到body内容中
        document.body.appendChild(a);
        a.href = url;
        a.download = "用户列表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);

        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('i', {style: 'color: teal'}, '文件导出成功')
          ])
        });
      })
    }
  }
}
</script>

<style scoped lang="less">
.el-breadcrumb {

}

.box-card {
  margin: 10px 0;
  width: 100%;
  height: 100%;
}

.el-pagination {
  margin-top: 10px;
}
</style>